<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="会员中心" bgColor="#E6EFFF">
				<view slot="left" class="nav-left">
				</view>
			</u-navbar>
		</view>
		
		
		
		<view class="user">
				<view class="flex-row items-center" @click="setClick">
					<view class="picTxt">
						<view v-if="!hasToken" class="pictrue" @click.stop="handleLogin">
							<image class="pic-btn" :src="staticResource('common/empty-img-bg3.png')" />
						</view>
						<view v-else>
							<image class="pic-btn-net" :src="userInfo.avatar ? userInfo.avatar : staticResource('user/default_avatar.jpg')" />
						</view>
					</view>
					
					<view style="margin-left: 20rpx;">
						<view v-if="!hasToken">
							<view class="name" @click.stop="handleLogin">登录/注册</view>
						</view>
						<view v-else class="flex-row items-center">
							<view class="name">{{ userInfo.nickname || userInfo.real_name }}</view>
							<u-icon name="arrow-right" size="17" style="margin-left: 15rpx;"></u-icon>
						</view>
					</view>
				</view>
		</view>
			
		<view class="mine-top-bg">
			<view class="flex-row items-center yundou-text" @click="$nav(1,'/pages/wallet/wallet')">
				<image src="/static/yundou_pay.png" style="width: 30rpx;height: 30rpx;"></image>
				<text style="margin-left: 8rpx;">我的云豆</text>
				<text style="margin-left: 8rpx;">{{graceNumber(cloud_bean)}}</text>
				<u-icon name="arrow-right" style="margin-left: 10rpx;"></u-icon>
			</view>
			<!--顶部4按钮-->
			<view class="user_top_group">
				<view class="flex-col items-center item" @click="$nav(1,'/pages/mine/collect/collect')">
					<view>商品收藏</view>
					<text class="txt">{{collectCount}}</text>
				</view>
				<view class="flex-col items-center item">
					<view>待评价</view>
					<text class="txt">{{orderCount}}</text>
				</view>
				<view class="flex-col items-center item" @click="$nav(1,'/pages/mine/history/history')">
					<view>浏览记录</view>
					<text class="txt">{{browseCount}}</text>
				</view>
				<view class="flex-col items-center item">
				   <view>优惠券</view>
				   <text class="txt">{{couponCount}}</text>
				</view>
				<!-- <view class="flex-col items-center item" @click="$nav(1,'/pages/mine/comment/comment')">
				   <view>我的评价</view>
				   <text class="txt">{{couponCount}}</text>
				</view> -->
			</view>
			
		</view>
		
		<!--订单-->
		<view class="user-order">
			<view class="flex-row justify-between">
				<view style="font-size: 26rpx;font-weight: bold;">我的订单</view>
				<view style="font-size: 22rpx;color: #999999;" @click="$nav(1,'/pages/order/order?id=0')">全部订单></view>
			</view>
			<view class="flex-row justify-between order-row">
				<view class="order-item" @click="$nav(1,'/pages/order/order?id=1')">
					<view class="image-container">
						<image :src="staticResource('user/order1.png')"></image>
						<view v-if="numOne != 0" class="badge">{{numOne}}</view>
					</view>
					<view class="txt">待付款</view>
				</view>
				<view class="order-item" @click="$nav(1,'/pages/order/order?id=2')">
					<view class="image-container">
						<image :src="staticResource('user/order5.png')"></image>
						<view v-if="numTwo != 0" class="badge">{{numTwo}}</view>
					</view>
					<view class="txt">待发货</view>
				</view>
				<view class="order-item" @click="$nav(1,'/pages/order/order?id=3')">
					<view class="image-container">
						<image :src="staticResource('user/order2.png')"></image>
						<view v-if="numThree != 0" class="badge">{{numThree}}</view>
					</view>
					<view class="txt">待收货</view>
				</view>
				<view class="order-item" @click="$nav(1,'/pages/order/order_after')">
					<view class="image-container">
						<image :src="staticResource('user/order4.png')"></image>
						<view v-if="numFour != 0" class="badge">{{numFour}}</view>
					</view>
					<view class="txt">退换/售后</view>
				</view>
			</view>
		</view>
		
		<!--服务-->
		<view class="user-server">
			<view style="font-size: 26rpx;font-weight: bold;">我的服务</view>
			<view class="flex-col">
				<view class="flex-row justify-between items-baseline" @click="$nav(1,'/pages/mine/comment/comment')">
					<view class="server-item">
						<image :src="staticResource('user/comment.png')"></image>
						<view>我的评价</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="$nav(1,'/pages/real/real?type='+userInfo.real_name_authentication)">
					<view class="server-item">
						<image :src="staticResource('user/user_real.png')"></image>
						<view>实名认证</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="$nav(1,'/pages/mine/account/account_home')">
					<view class="server-item">
						<image :src="staticResource('user/zhanghaoguanli.png')"></image>
						<view>账号管理</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="$nav(1,'/pages/mine/address/address')">
					<view class="server-item">
						<image :src="staticResource('user/shouhuodizhi.png')"></image>
						<view>收货地址</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="serviceClick">
					<view class="server-item">
						<image :src="staticResource('user/kefu_icon.png')"></image>
						<view>联系客服</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="$nav(1,'/pages/mine/help/help')">
					<view class="server-item">
						<image :src="staticResource('user/help_icon.png')"></image>
						<view>帮助中心</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="goAgrment(1)">
					<view class="server-item">
						<image :src="staticResource('user/user_agr.png')"></image>
						<view>用户服务协议</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="goAgrment(2)">
					<view class="server-item">
						<image :src="staticResource('user/ys_agr.png')"></image>
						<view>隐私政策</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="line"></view>
				<view class="flex-row justify-between items-baseline" @click="goAgrment(3)">
					<view class="server-item">
						<image :src="staticResource('user/recharge_agr.png')"></image>
						<view>充值协议</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				
			</view>
		</view>
		
		
		<Tabbar :current-page='4'></Tabbar>
	</view>
</template>

<script>
import debounce from '../../uni_modules/uview-ui/libs/function/debounce';

	export default {
		data() {
			return {
				userInfo:{},
				collectCount:0,
				orderCount:0,
				couponCount:0,
				browseCount:0,
				cloud_bean:0,
				
				
				numOne:0,
				numTwo:0,
				numThree:0,
				numFour:0,
				
				canNavigate: true, 
				
			};
		},
		onLoad() {
			
		},
		onShow() {
			// console.log(this.$store.state.token)
			if(this.$store.state.token){
				this.getUserInfo();
			}else{
				this.collectCount = 0
				this.orderCount = 0
				this.couponCount = 0
				this.browseCount = 0
				this.cloud_bean = 0
				this.numOne = 0
				this.numTwo = 0
				this.numThree = 0
				this.numFour = 0
			}
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight +44;
			},
			hasToken(){
				return this.$store.state.token;
			}
		},
		methods:{
			goAgrment(index){
				uni.navigateTo({
					url:'/pages/login/agreement?id=' + index
				})
			},
			serviceClick(){
				uni.showActionSheet({
				  itemList: ['热线电话1','热线电话2'],
				  success: function (res) {
				    // console.log(`选中了第${res.tapIndex + 1}个菜单`);
					if(res.tapIndex + 1 == 1){
						uni.makePhoneCall({
							phoneNumber:'18880803339'
						})
					}else{
						uni.makePhoneCall({
							phoneNumber:'18281961133'
						})
					}
					
				  },
				  fail: function (res) {
				    console.log(res.errMsg);
				  }
				});

			},
			graceNumber(number) {
				if (number == 0) {
				  return "0";
				} else if (number > 999 && number <= 9999) {
				  return (number / 1000).toFixed(2) + 'k';
				} else if (number > 9999 && number <= 99999) {
				  return (number / 10000).toFixed(2) + 'w';
				} else if (number > 99999) {
				  return "10w+";
				}
				return number;
				
		    },
			
			getOrderCount(){
				this.$request({
					url:'?c=Order&a=orderCount',
					type:'post',
				}).then(res =>{
					let countList = res.data;
					countList.forEach(i =>{
						if(i.order_state == 0){
							this.numOne = i.count
						}else if(i.order_state == 1){
							this.numTwo = i.count
						}else if(i.order_state == 2){
							this.numThree = i.count
						}else if(i.order_state == 3){
							this.numFour = i.count
						}
					})
				})
			},
			
			handleLogin(){
				if(this.canNavigate){
					this.canNavigate = false;
					setTimeout(() =>{
						this.canNavigate = true;
					},100)
					this.$handleLogin();
				}
			},
			getTextLabel(){
				this.$request({
					url:'?c=User&a=infoExt',
					type:'post'
				}).then(res =>{
					this.collectCount = res.data.collectCount
					this.orderCount = res.data.orderCount
					this.couponCount = res.data.couponCount
					this.browseCount = res.data.browseCount
					this.cloud_bean = res.data.cloud_bean
				})
			},
			getUserInfo(){
				this.$request({
					url:'?c=User&a=info',
					type:'get',
				}).then(res =>{
					this.userInfo = res.data;
					this.getTextLabel();
					this.getOrderCount();
				})
			},
			setClick(){
				if(this.$store.state.token){
					uni.navigateTo({
						url:'/pages/mine/basic_info/basic_info'
					});
				}else{
					this.handleLogin();
				}
			},
			staticResource(path){
				return "https://ysmz.scmzhc.com/static/mini/images/"+path;
			},
		}
	}
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	background-image: linear-gradient(rgb(230,239,255), rgb(245,245,245));
}
.user{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-right: 30rpx;
	.picTxt{
		 margin-left: 30rpx;
		.pictrue{
			overflow: hidden;
			width: 110rpx;
			height: 110rpx;
			box-sizing: border-box;
			border: 1rpx solid #f5f5f5;
			.pic-btn{
				width: 110rpx;
				height: 110rpx;
				overflow: hidden;
				border-radius: 50%;
			}
		}
	}
}
.image-container{
	position: relative;
	display: inline-block; 
}
.image-container image {
  display: block; 
}
.badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 28rpx; /* 徽标大小 */
  height: 28rpx; /* 徽标大小 */
  background-color: red; /* 徽标颜色 */
  border-radius: 50%; /* 圆形徽标 */
  color: #fff;
  font-size: 23rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user_top_group {
	width: 100%;
    display: flex;
	flex-direction: row;
	justify-content: space-around;
    align-items: center;
    margin-top: 30rpx;
	margin-bottom: 20rpx;
	.item{
		text-align: center;
		font-size: 24rpx;
		gap: 15rpx;
		.txt{
			// margin-left: 10rpx;
			font-weight: bold;
		}
	}
}
.user-order{
	background-color: #fff;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	padding: 25rpx;
	margin: 25rpx;
}
.order-row{
	padding-top: 30rpx;
}
.order-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.txt{
		color: #333;
		font-size: 24rpx;
		padding-top: 10rpx;
	}
}
.order-item image{
	width: 60rpx;
	height: 60rpx;
}
.user-server{
	background-color: #fff;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	padding: 25rpx;
	// margin: 25rpx;
	margin-left: 25rpx;
	margin-right: 25rpx;
	margin-bottom: 180rpx;
}
.server-item{
	display: flex;
	flex-direction: row;
	font-size: 28rpx;
	margin-top: 30rpx;
	gap: 20rpx;
}
.server-item image{
	width: 40rpx;
	height: 40rpx;
}
.line{
	border: 1px solid #f5f5f5;
	margin-top: 25rpx;
}
.pic-btn-net{
	width: 110rpx;
	height: 110rpx;
	overflow: hidden;
	border-radius: 50%;
}
.mine-top-bg{
	background-image: url("https://ysmz.scmzhc.com/static/mini/images/user/mine_top_bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	// height: 300rpx;
	display: flex;
	flex-direction: column;
	margin-left: 25rpx;
	margin-right: 25rpx;
	gap: 20rpx;
	margin-top: 20rpx;
	justify-content: space-between;
}
.yundou-text{
	margin-left: 35rpx;
	font-size: 26rpx;
	margin-top: 20rpx;
}
</style>
